<template>
  <div class="form-layout">
    <div style="padding-bottom: 15px;">
      <FortenScan ref="scan"
      propPlaceholder="扫描检索标签"
      @after-scan="barCodeScan"
      propType="uniqueCode"
      style="margin-left: 140px; width: 300px; display: inline-block;  margin-right: 10px;"/>
      <customSpace>
        <template #content>
          <customButton
            size="medium"
            @click="onSubmit"
            title="查询"
            theme="primary"/>
          <customButton
            size="medium"
            @click="initData"
            title="重置"/>
        </template>
      </customSpace>
    </div>
    <div>
      <!--左侧导航-->
      <div class="nav-left">
        <customAnchor
          :itemList="[
          { name: 'box-info', title: '耗材信息' },
          { name: 'box-time', title: '耗材流通情况' },
          { name: 'box-dtl', title: '加工单详情' },
        ]"
        />
      </div>

      <!--表单区域-->
      <div class="form-right" ref="formRight">
        <customForm :data="form" :rules="propRules" ref="editForm" :disabled="true" :withRangeYMD="true" >
          <template #content>
            <div id="box-info" class="box-title">耗材信息</div>
            <customFormItem label="品名" name="matrName" :parent="_self" :form="form" />
            <customFormItem label="品规" name="matrSpec" :parent="_self" :form="form" />
            <customFormItem label="厂商" name="mfgName" :parent="_self" :form="form" />
            <customFormItem label="供应商" name="supplierName" :parent="_self" :form="form" />
            <customFormItem label="最后所在仓库" name="warehouseName" :parent="_self" :form="form" />
            <customFormItem label="sn" name="sn" :parent="_self" :form="form" />
            <customFormItem label="rfid" name="rfid" :parent="_self" :form="form" />
            <customFormItem label="批次" name="lot" :parent="_self" :form="form" />
            <div class="label-class w-360">
              <strong>生产日期</strong>{{dates.formatToAnotherPattern(form.mfgDate) }}
            </div>
            <div class="label-class w-360">
              <strong>有效期</strong>{{dates.formatToAnotherPattern(form.expDate) }}
            </div>
            <customFormItem label="锁库情况" name="lockComment" :parent="_self" :form="form" />
          </template>
        </customForm>

        <div id="box-time" class="box-title">耗材流通情况</div>
        <customTimeline
          :itemList="timelineList"
          v-if="timelineList.length >0"
        >
          <template v-slot:content="{item}">
            <div class="label-block" >
              <div v-for="(labelItem, labelIndex) in item.labelList" :value="labelIndex">
                <span>{{ labelItem.label}}</span>
                <customButton style="padding: 0;" variant="text"  :title="item[labelItem.value]"  v-if="labelItem.value == 'busKey'" theme="primary" size="medium" @click="menuJump(item)"/>
                <p v-else>{{item[labelItem.value]}}</p>
              </div>
            </div>
          </template>
        </customTimeline>
        <div v-else class="empty">
          暂无信息
        </div>
        <div id="box-dtl" class="box-title">加工单详情</div>
        <customTimeline
          :itemList="processList"
          v-if="processList.length >0"
        >
          <template v-slot:content="{item}">
            <div class="label-block" >
              <div v-for="(labelItem, labelIndex) in item.labelList" :value="labelIndex">
                <span>{{ labelItem.label}}</span>
                <customButton variant="text"  :title="item[labelItem.value]"  v-if="labelItem.value == 'busKey'" theme="primary" size="medium" @click="menuJump(item)"/>
                <p v-else>{{item[labelItem.value]}}</p>
              </div>
            </div>
          </template>
        </customTimeline>
        <div v-else class="empty">
          暂无信息
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import barcodeParse from '@/util/barcodeParse.js'
import customAnchor from '@/components/custom/form/customAnchor.vue'
import customTimeline from '@/components/custom/layout/customTimeline.vue'

export default {
  data() {
    return {
      txtScan: '',
      activeName: ['1', '2','3'],
      form: {},
      sn: '',
      timelineList: [],
      processList: [],
      flowDict:[
        {
          name: '入库',
          key: 'IN',
          busType: ['IN_ASN', 'IN_MANUAL', 'IN_PACKAGE', 'IN_INIT'],
          item: [
            {
              label: '入库单号',
              value: 'busKey'
            },
            {
              label: '入库仓库',
              value: 'warehouseName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'调拨',
          busType: ['OUT_SHIFT', 'IN_SHIFT', 'OUT_SHIFT_OW', 'IN_SHIFT_OW'],
          item: [
            {
              label: '调拨单号',
              value: 'busKey'
            },
            {
              label: '调出仓库',
              value: 'warehouseName'
            },
            {
              label: '调入仓库',
              value: 'inWarehouseName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'科室配送',
          busType: ['OUT_DIST', 'AUTO_APPLY', 'AUTO_PURCHASE'],
          item: [
            {
              label: '配送单号',
              value: 'busKey'
            },
            {
              label: '配送仓库',
              value: 'warehouseName'
            },
            {
              label: '配送至',
              value: 'deptName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'科室消耗',
          busType: ['OUT_USE'],
          item: [
            {
              label: '消耗单号',
              value: 'busKey'
            },
            {
              label: '消耗科室',
              value: 'deptName'
            },
            {
              label: '消耗仓库',
              value: 'warehouseName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'消耗计费',
          busType: ['OPRT_USE',],
          item: [
            {
              label: '消耗单号',
              value: 'busKey'
            },
            {
              label: '消耗科室',
              value: 'deptName'
            },
            {
              label: '消耗仓库',
              value: 'warehouseName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'消耗计费冲红',
          busType: ['IN_OPRT_RED',],
          item: [
            {
              label: '消耗单号',
              value: 'busKey'
            },
            {
              label: '消耗科室',
              value: 'deptName'
            },
            {
              label: '消耗仓库',
              value: 'warehouseName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'供应商退货',
          busType: ['OUT_SP',],
          item: [
            {
              label: '退货单号',
              value: 'busKey'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'科室退货',
          busType: ['IN_DEPT_RETURN',],
          item: [
            {
              label: '退货单号',
              value: 'busKey'
            },
            {
              label: '退货仓库',
              value: 'warehouseName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        {
          name:'科室消耗冲红',
          busType: ['IN_USE_RED'],
          item: [
            {
              label: '消耗单号',
              value: 'busKey'
            },
            {
              label: '冲红仓库',
              value: 'warehouseName'
            },
            {
              label: '操作人',
              value: 'busUser'
            },
          ]
        },
        ,
      ]
    }
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propStatus: String,
    propRules: Object,
    propFlowKey: String,
    propParam: Object
  },

  computed: {},
  methods: {
    // 初始化表单
    initData() {
      this.form = {}
      this.txtScan = ''
      this.timelineList = []
      this.processList = []
    },
    // 跳转业务单据
    menuJump(data) {
      console.log('menuJump data', data)
      if (this.strings.isBlank(data.menuRoute)) {
        return
      }
      global.utils.openMenu(data.menuRoute, {id: data.openBusId})
    },
    //扫码SN或RFID
    barCodeScan(value) {
      this.txtScan = this.strings.trimrl(value)
      console.log('txtScan======', this.txtScan)
      this.onSubmit(value)
    },
    async onSubmit(value) {
      this.initData()
      const txtScan = this.strings.trimrl(this.$refs.scan.txtScan || value)
      console.log('txtScan', txtScan)
      let codeType = barcodeParse.barCodeType(txtScan)
      if (codeType == 'SN' || codeType == 'RFID' || codeType == 'UDI') {
        await this.$ajax.get('/wm/work_order/get_list_by_sn', { params: { sn: txtScan } }).then((res) => {
          if(res.code == 0){
            if (res.data) {
              this.form = res.data.stockDTO
              this.timelineList = res.data.list.map(item => {
                const flowStatus = item.flowStatus == 'end' ? '已审核' : '处理中'
                const _busType = item.busType
                const flowItem = this.flowDict.filter(item => item.busType.includes(_busType))[0]
                const _name = flowItem.name
                const _title = flowItem.key === 'IN' ? utils.getDictLabel(item.busType, 'wm_in_order_type', '入库', false) : _name
                return {
                  ...item,
                  flowStatus,
                  title: _title + '(' + flowStatus + ')' ,
                  date: item.gmtModified,
                  labelList: flowItem.item
                }
              })
              this.processList = res.data.processListrocesses.map(item => {
                return {
                  ...item,
                  title: item.processType == '1' ? '拆分' : '合并',
                  date: item.gmtModified,
                  labelList: [
                    {
                      label: '加工单号',
                      value: 'busKey'
                    },
                    {
                      label: '仓库',
                      value: 'warehouseName'
                    },
                    {
                      label: '主单据SN',
                      value: 'sn'
                    },
                    {
                      label: '加工时间',
                      value: 'gmtModified'
                    },
                  ]
                }
              })
            }else{
              this.utilMessage.success('未查询到数据')
            }
          }
        })
      } else {
        this.utilMessage.error(" 请输入正确的SN/RFID/UDI")
      }
    }
  },
  components: {customAnchor, customTimeline},
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
.form-right {
  background: #fff;
  max-height: calc(100% - 70px);
}
.label-block {
  display: flex;
  justify-content: left;
  div {
    margin-right: 40px;
    span {
      display: block;
      color: #181818;
      font-weight: 600;
    }
    p {
      margin: 8px 0;
      color: #5e5e5e;
    }
    .link {
      display: block;
      min-width: 120px;
      margin: 8px 0;
      color: #0052d9
    }
  }
}
.empty {
  padding: 20px 10px;
  color: #8b8b8b;
}
</style>
